<template>
  <transition name="fade">
    <div class="photo-viewer" v-show="isOpen">
      <img :src="previewUrl">
      <div class="closer" @click="closePreviewer">X</div>
    </div>
  </transition>
</template>

<script lang="ts">
import { Component, Watch, Vue } from 'vue-property-decorator'
import { State } from 'vuex-class'

@Component
export default class PhotoViewer extends Vue {
  @State previewerVisable: boolean
  @State previewUrl: string

  isOpen: boolean = false

  created() {
    document.addEventListener('keyup', this.escClosePreviewer)
  }

  @Watch('previewerVisable', { immediate: true })
  onValueChanged(newValue, oldValue) {
    if (newValue !== oldValue) {
      this.$store.commit('SET_PREVIEWER_VISABLE', newValue)
      this.isOpen = newValue
    }
  }

  closePreviewer() {
    this.$store.commit('SET_PREVIEWER_VISABLE', false)
  }

  escClosePreviewer(event) {
    if (event.keyCode === 27) this.closePreviewer()
  }
}
</script>

<style lang="scss" scoped>
.photo-viewer {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  overflow: auto;
  /*transform: translateX(0);*/
  background: #ffffff;
  /*background-size: cover;*/

  img {
    width: 100%;
    display: block;
  }

  .closer {
    position: fixed;
    z-index: 9999;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: #000;
    color: #ffffff;
    font-size: 20px;
    font-weight: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    cursor: pointer;
    user-select: none;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
 {
  opacity: 0;
}
</style>
